import "./style.scss";
import "../../comm.scss";
import React,{ Component } from 'react';
import Cesium from "cesium/Cesium";
import { connect } from "react-redux"
import { Button } from "antd";

class PolyLine extends Component {
    addLine(){
        const { viewer } = this.props;
        const czml = [{
            "id" : "document",
            "name" : "CZML Geometries: Circles and Ellipses",
            "version" : "1.0"
        },{
            "id" : "shape1",
            "name" : "Green circle at height",
            "position" : {
                "cartographicDegrees" : [- 111.0,40.0,150000.0]
            },
            "ellipse" : {
                "semiMinorAxis" : 300000.0,
                "semiMajorAxis" : 300000.0,
                "height" : 200000.0,
                "material" : {
                    "solidColor" : {
                        "color" : {
                            "rgba" : [0,255,0,255]
                        }
                    }
                }
            }
        },{
            "id" : "shape2",
            "name" : "Red ellipse with white outline on surface",
            "position" : {
                "cartographicDegrees" : [- 103.0,40.0,0]
            },
            "ellipse" : {
                "semiMinorAxis" : 250000.0,
                "semiMajorAxis" : 400000.0,
                "height" : 0,
                "material" : {
                    "solidColor" : {
                        "color" : {
                            "rgba" : [255,0,0,127]
                        }
                    }
                },
                "outline" : true, // height must be set for outlines to display
                "outlineColor" : {
                    "rgba" : [255,255,255,255]
                }
            }
        },{
            "id" : "shape3",
            "name" : "Blue translucent, rotated, and extruded ellipse with outline",
            "position" : {
                "cartographicDegrees" : [- 95.0,40.0,100000.0]
            },
            "ellipse" : {
                "semiMinorAxis" : 150000.0,
                "semiMajorAxis" : 300000.0,
                "extrudedHeight" : 200000.0,
                "rotation" : 0.78539,
                "material" : {
                    "solidColor" : {
                        "color" : {
                            "rgba" : [0,0,255,127]
                        }
                    }
                },
                "outline" : true
            }
        }];

        const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
        viewer.dataSources.add(dataSourcePromise);
        viewer.zoomTo(dataSourcePromise);
    }

    addBall(){
        const { viewer } = this.props;
        viewer.entities.add({
            name : 'ellipsoid',
            position : Cesium.Cartesian3.fromDegrees(- 121.0744619,44.0503706,8000),
            ellipsoid : {
                radii : new Cesium.Cartesian3(4000,4000,4000), //设置球体的xyz
                material : Cesium.Color.CORAL
            }
        });
        viewer.flyTo(viewer.entities);
    }

    addSquare(){
        const { viewer } = this.props;
        viewer.entities.add({
            name : 'Blue box',
            position : Cesium.Cartesian3.fromDegrees(- 114.0,40.0,300000.0),
            box : {
                dimensions : new Cesium.Cartesian3(400000.0,300000.0,500000.0),
                material : Cesium.Color.BLUE
            }
        });

        viewer.entities.add({
            name : 'Red box with black outline',
            position : Cesium.Cartesian3.fromDegrees(- 107.0,40.0,300000.0),
            box : {
                dimensions : new Cesium.Cartesian3(400000.0,300000.0,500000.0),
                material : Cesium.Color.RED.withAlpha(0.5),
                outline : true,
                outlineColor : Cesium.Color.BLACK
            }
        });

        viewer.entities.add({
            name : 'Yellow box outline',
            position : Cesium.Cartesian3.fromDegrees(- 100.0,40.0,300000.0),
            box : {
                dimensions : new Cesium.Cartesian3(400000.0,300000.0,500000.0),
                fill : false,
                outline : true,
                outlineColor : Cesium.Color.YELLOW
            }
        });
        viewer.flyTo(viewer.entities);
    }

    removeDataSources(){
        const { viewer } = this.props;
        viewer.dataSources.removeAll();
    }

    removeEntities(){
        const { viewer } = this.props;
        viewer.entities.removeAll();
    }

    render(){
        return (
            <div className="btn">
                <Button onClick={this.addLine.bind(this)}>添加面（非实体）</Button>
                <Button onClick={this.removeDataSources.bind(this)}>非实体方式移除</Button>
                <Button onClick={this.addBall.bind(this)}>添加球（实体）</Button>
                <Button onClick={this.addSquare.bind(this)}>添加方体（实体）</Button>
                <Button onClick={this.removeEntities.bind(this)}>实体方式移除</Button>
            </div>
        );
    }
}

const mapStateToProps = state => ( {
    viewer : state.App.viewer
} );

export default connect(mapStateToProps,{})(PolyLine);


